<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="js/index.js"></script>
</head>
<body>
<header>
    <div class="head">
        <p class="fl">王宏建</p>

        <li class="fr">
            <span class="sp1 "></span>
            <span class="sp2 "></span>
            <span class="sp3"></span>
        </li>
    </div>
</header>
<div class="container">
    <div class="left">
        <div class="bei">
            <div class="js"></div>
            <div class="nei">
                <div id="slogan" data-text="我是王宏建">
                    我是<span></span>
                </div>
                <p>年龄： <span>20岁</span></p>
                <p>生日： <span>11月12日</span></p>
                <p>地址： <span>河北省滦州市</span></p>
                <p>电子邮件： <span>1726203416@qq.com</span></p>
                <p>电话： <span>1540185412</span></p>
                <p>专业： <span>前端</span></p>
                <div class="a">
                    <a href="#" onclick="as()" id="asd">简历</a>
                    <a href="#" onclick="zx()">联系我</a>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="head">
            <div class="tou1"></div>
            <p class="m">王宏建</p>
            <div class="lian">
                <a href="" class="face"></a>
                <a href="" class="niao"></a>
                <a href="" class="in"></a>
                <a href="" class="ji"></a>
                <a href="" class="v"></a>
            </div>
         <div class="r-main">
            <p class="ho" onclick="ji()">Home</p>
            <p class="wo" onclick="dian()">关于我</p>
            <p class="jian" onclick="dian()">我的简历</p>
            <!--<p class="fu" onclick="dian()">服务</p>-->
            <p class="bo" onclick="dian()">我的博客</p>
            <p class="xi" onclick="dian()">联系</p>
         </div>
        </div>
    </div>
    <div class="yin">
        <div class="woo">
            <img src="./image/me-1.jpg" alt="">
            <div class="ppp">
                <p>
                    Web前端工程师的职责是编写网页标准优化代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
                <p>随着互联网技术的发展，随着HTML5、CSS3、JavaScript、Node.js的应用。Web前端工程师逐步具备从客户端（用户端）到后台（服务器端）综合开发的能力。</p>
            </div>
            <div class="shu">
                <div class="col">
                    <h3>基础知识</h3>
                    <div>
                        <div class="ht">
                            <h5>HTML5</h5>
                            <div class="ld">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                        <div class="x"></div>
                        <span class="j">专家</span>
                    </div>
                    <div>
                        <div class="ht">
                            <h5>CSS3</h5>
                            <div class="ld">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="tou"></span>
                            </div>
                        </div>
                        <div class="x"></div>
                        <span class="j">一般</span>
                    </div>
                    <div>
                        <div class="ht">
                            <h5>js</h5>
                            <div class="ld">
                                <span></span>
                                <span></span>
                                <span class=""></span>
                                <span class="tou"></span>
                                <span class="tou"></span>
                            </div>
                        </div>
                        <div class="x"></div>
                        <span class="j">基础</span>
                    </div>

                </div>
                <div class="col">
                    <h3>专业技能</h3>
                    <div>
                        <div class="ht">
                            <h5>jQuery</h5>
                            <div class="ld">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="tou "></span>
                                <span class="tou"></span>
                            </div>
                        </div>
                        <div class="x"></div>
                        <span class="j">基础</span>
                    </div>
                    <div>
                        <div class="ht">
                            <h5>ajax</h5>
                            <div class="ld">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="tou"></span>
                                <span class="tou"></span>
                            </div>
                        </div>
                        <div class="x"></div>
                        <span class="j">基础</span>
                    </div>
                    <div>
                        <div class="ht">
                            <h5>node</h5>
                            <div class="ld">
                                <span></span>
                                <span></span>
                                   <span class="tou"></span>
                                <span class="tou"></span>
                                <span class="tou"></span>
                            </div>
                        </div>
                        <div class="x"></div>
                        <span class="j">初学</span>
                    </div>
                </div>
            </div>
            <div class="zuo">
                <h1>我的项目</h1>
                <div class="ye">
                    <div class="col">
                        <img src="./image/hu.png" alt="">
                        <div class="p">虎牙直播首页及部分子页面 主要使用css3、js、json数据和swipe插件等制作，支持响应式。没有视频效果。</div>
                        <a href="http://whj172.gitee.io/huyadabian/"></a>
                    </div>
                    <div class="col">
                        <img src="./image/ten.png" alt="">
                        <div class="p">腾讯网科技页 主要使用html5、css3、js等制作而成的静态页面。js效果是我当时做的一大难题。</div>

                        <a href="http://whj172.gitee.io/tengxunxinwen/"></a>
                    </div>
                    <div class="col">
                        <img src="./image/dui.png" alt="">
                        <div class="p">堆糖网 主要使用html5、css3、bootstrap插件等制作而成的静态页面。</div>
                        <a href="http://whj172.gitee.io/duitang/"></a>
                    </div>
                    <div class="col">
                        <img src="./image/yun.png" alt="">
                        <div class="p">云巴网 主要使用css3、bootstrap插件等制作而成的静态页面。几乎所有效果都是用bootstrap来实现的。</div>
                        <a href="http://whj172.gitee.io/yun_ba"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="jii">
            <div class="tou1 t2"></div>
            <div class="ge">
                <p>年	龄 ：<span>20</span></p>
                <p>手 机 号 ：<span>155****2179</span></p>
                <p>微 信 号 ：<span>同上</span></p>
                <p>Q  Q ：<span>1726203416</span></p>
                    <p>码  云 ：<a href="https://gitee.com/whj172">https://gitee.com/whj172</a></p>
                <p>邮	箱：<span><a href="https://mail.qq.com/cgi-bin/frame_html?sid=t68pnliwSao1QCZ7&r=26d888684974a43710fd229f29ce7ae3">1726203416@qq.com</a></span></p>
                <p>现住城市：<span>河北省唐山市滦州市</span></p>
                <p>爱 好：<span>吃零食、听音乐、打游戏</span></p>
            </div>
            <div class="tai">
                <div>
                    <img src="./image/lian.png" alt="">
                    <p>心态</p>
                    <p>乐观、向上</p>
                </div>
                <div>
                    <img src="./image/qi.png" alt="">
                    <p>目标</p>
                    <p>IT精英</p>
                </div>
                <div>
                    <img src="./image/jiang.png" alt="">
                    <p>成绩</p>
                    <p>一般</p>
                </div>
                <div>
                    <img src="./image/zan.png" alt="">
                    <p>性格</p>
                    <p>开朗、友善</p>
                </div>
            </div>
        </div>
        <!--<div class="fuu">我是24岁的创意网页设计师，总部设在纽约，专门从事用户界面设计和开发。我构建了符合最新Web标准的干净、吸引人和功能的界面。</div>-->
        <div class="boo">
            <h2>
                我的博客
            </h2>
            <div class="row">
                <div class="col col2">
                    <div class="c1">
                        <img src="./image/blog-1.jpg" alt="">
                        <a href="https://www.jianshu.com/p/86f71c038d6b"></a>
                    </div>
                    <div class="p1">
                        <p>March 19, 2019</p>
                        <h3>100种更快乐的方式</h3>
                    </div>
                </div>
                <div class="col">
                    <div class="c1">
                        <img src="./image/blog-2.jpg" alt="">
                        <a href="https://www.xiaohongshu.com/discovery/item/5cb0026b000000000f008599"></a>
                    </div>
                    <div class="p1">
                        <p>March 19, 2019</p>
                        <h3>减肥秘诀</h3>
                    </div>
                </div>
                <div class="col col2">
                    <div class="c1">
                        <img src="./image/blog-3.jpg" alt="">
                        <a href="https://www.jianshu.com/p/9af2a396269b"></a>
                    </div>
                    <div class="p1">
                        <p>March 19, 2019</p>
                        <h3>幸福的方案</h3>
                    </div>
                </div>
                <div class="col">
                    <div class="c1">
                        <img src="./image/blog-4.jpg" alt="">
                        <a href="https://www.jianshu.com/p/0a55b1043dc9"></a>
                    </div>
                    <div class="p1">
                        <p>March 19, 2019</p>
                        <h3>成功的途径</h3>
                    </div>
                </div>
                <div class="col col2">
                    <div class="c1">
                        <img src="./image/blog-5.jpg" alt="">
                        <a href="https://www.jianshu.com/p/0a55b1043dc9"></a>
                    </div>
                    <div class="p1">
                        <p>March 19, 2019</p>
                        <h3>成功的途径</h3>
                    </div>
                </div>
                <div class="col">
                    <div class="c1">
                        <img src="./image/blog-6.jpg" alt="">
                        <a href="https://www.jianshu.com/p/cd2ac64e5d9a"></a>
                    </div>
                    <div class="p1">
                        <p>March 19, 2019</p>
                        <h3>平稳的心态</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="xii">
            <h2>
                联系我
            </h2>
            <div class="main">
                <h3>联系方式</h3>
                <div>
                    <img src="./image/ding.png" alt="">
                    <div class="vv">
                        <p>找到我</p>
                        <a href="https://map.baidu.com/search/滦州市/@13214933.98,4801684.51,13z?querytype=s&da_src=shareurl&wd=滦州市&c=149&src=0&pn=0&sug=0&l=13&b=(12958618,4556940;13002330,4577964)&from=webmap&biz_forward=%7B"scaler":1,"styles":"pl"%7D&device_ratio=1" class="p3">河北省 滦州市</a>
                    </div>
                </div>
                <div>
                    <img src="image/mail.png" alt="">
                    <div class="vv">
                        <p>发邮件给我</p>
                        <p class="p3">我的邮箱1726203416@qq.com</p>
                    </div>
                </div>
                <div>
                    <img src="image/hua.png" alt="">
                    <div class="vv">
                        <p>Call我</p>
                        <p class="p3">+155****2179</p></div>
                </div>
                <div>
                    <img src="image/bo.png" alt="">
                    <div class="vv">
                        <p>微博私信</p>
                        <a href="https://weibo.com/u/6622737436/home?wvr=5" class="p3">与邮箱相同</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js.js"></script>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="index.js"></script>

</body>
</html>